<template>
  <div class="page-select-service">
    <div class="info-wrap">
      <div class="info-item">
        <div class="info-name">
          预付金额
        </div>
        <input type="number" v-model="number" placeholder="请输入预付金额"/>
      </div>
      <div class="info-item">
        <div class="info-name">
          付款方式
        </div>
        <picker mode="selector" :range="payTypeList" range-key="payTypeStr" @change="bindPayTypeChange" :value="payVo.payType">
          <div class="picker" :class="payVo.payTypeStr ? '':'disabled'">
            {{payVo.payTypeStr ? payVo.payTypeStr :
            '请选择付款方式'}}
          </div>
        </picker>
        <img class="btn-right" src="/static/images/common/right.png">
      </div>
    </div>
    <div class="btn-submit" @click="toSelect">确定添加</div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        payTypeList: [],
        payVo: {},
        number: '',
      };
    },
    components: {},
    methods: {
      bindPayTypeChange(e) {
        this.payVo = this.payTypeList[ e.mp.detail.value ];
      },
      toSelect() {
        if (!this.number) {
          wx.showToast("请输入预付金额");
          return false;
        }
        if (!this.payVo.payType) {
          wx.showToast("请选择付款方式");
          return false;
        }
        App.servicePayVO.push({
          partPayAmount: this.number,
          payType: this.payVo.payType,
          payTypeStr: this.payVo.payTypeStr,
          payStatus: 2,
        })
        wx.navigateBack();
      },
    },
    async mounted() {
      wx.showLoading();
      const result = await wx.request({
        url: '/bg/payType/listPage',
        data: {
          page: 1,
          pageSize: 50,
        }
      });
      wx.hideLoading();
      if (result.code === 200) {
        const list = [];
        result.data.rows.forEach(data => {
          list.push(_.pick(data, [ "payType", "payTypeStr" ]));
        });
        this.payTypeList = list;
      } else {
        wx.showToast(result.message);
      }
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";

  .page-select-service {
    .title {
      padding: pxToRem(40) pxToRem(30) pxToRem(10);
      font-size: pxToRem(32);
      color: #707070;
    }
    .category-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: pxToRem(40) pxToRem(50) pxToRem(10);
      box-sizing: border-box;
      .category {
        margin-bottom: pxToRem(40);
        width: pxToRem(180);
        height: pxToRem(62);
        line-height: pxToRem(62);
        border: pxToRem(1) solid #9B9B9B;
        font-size: pxToRem(28);
        color: #9B9B9B;
        border-radius: pxToRem(31);
        text-align: center;
        box-sizing: border-box;
        &:nth-child(3n-1) {
          margin-left: pxToRem(50);
          margin-right: pxToRem(50);
        }
        &.active {
          color: #44BDF5;
          border: pxToRem(1) solid #44BDF5;
        }
      }
    }
    .btn-submit {
      margin: pxToRem(310) auto 0;
      width: pxToRem(444);
      height: pxToRem(88);
      line-height: pxToRem(88);
      text-align: center;
      font-size: pxToRem(40);
      color: #fff;
      background: linear-gradient(90deg, rgba(117, 228, 252, 1) 0%, rgba(68, 189, 245, 1) 100%);
      border-radius: pxToRem(8);
    }
  }
</style>
